<template>
  <div class="t-home">
    <h4>天晴资源库</h4>
    <div class="t-home-body">
      <search-bar v-model="condition" />
    </div>
    <div class="t-home-category">
      <div class="t-home-category-wrap">
        <div v-for="(item, index) in categoryList" :key="index" @click="goMenu(item)" class="t-home-category-card">
          <img :src="getImgUrl(item.categoryImg)" />
          <span>{{ item.categoryName }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Home">
import SearchBar from '@/components/SearchBar/index.vue';

import {getMainCategoryList} from "@/api/source.js";
import {useRouter} from "vue-router";

const router = useRouter();

const condition = ref('');
const categoryList = ref([]);

const loadMainCategory = () => {
  getMainCategoryList().then(res => {
    console.log(res, '2222')
    if (res.code === 200) {
      categoryList.value = res.data;
    }
  })
}

/** 跳转菜单 */
const goMenu = (row) => {
  router.push({
    path: row.jumpPath
  });
}

onBeforeMount(() => {
  loadMainCategory();
});

</script>

<style lang="scss" scoped>
.t-home {
  padding: 40px 0;

  h4 {
    text-align: center;
    font-size: 30px;
    color: var(--tc-title-color);
  }

  &-body {
    display: flex;
    align-items: center;
    justify-content: center;

    :deep(.search-bar)  {
      width: 600px;
    }
  }

  &-category {
    margin-top: 50px;
    padding: 20px 40px;
    display: flex;
    justify-content: center;

    &-wrap {
      display: flex;
      flex-wrap: wrap;
      user-select: none;
    }

    &-card {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      border-radius: 10px;
      cursor: pointer;
      user-select: none;
      margin-right: 30px;

      > img {
        width: 60px;
        height: 60px;
      }

      > span {
        margin-top: 10px;
        font-size: 16px;
      }
    }

    &-card:last-child {
      margin-right: 0;
    }

    &-card:hover {
      box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
    }
  }

}
</style>

